<template>
  <div>
    <el-breadcrumb separator="/" class="submenu">
      <el-breadcrumb-item class="main-top">新增工厂考察评估</el-breadcrumb-item>
    </el-breadcrumb>
    <h3 class="panel-title">工厂考察评估主信息</h3>
    <div class="panel-main">
      <el-form :inline="true" :model="formInline" :rules="rules" ref="formInline" label-width="120px">
        <el-input style="display:none" v-model="formInline.factoryInspectItemListJsonStr"></el-input>
        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <el-form-item label="采购组织" prop="purOrgId">
                <el-select v-model="formInline.purOrgId" placeholder="请选择" @change="handleChange">
                  <el-option v-for="item in purOrgOptions" :key="item.id" :label="item.purOrgName" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <el-form-item label="采购组:" prop="purGroupId">
                <el-select v-model="formInline.purGroupId" placeholder="请选择">
                  <el-option v-for="item in relationPurGroup" :key="item.id" :label="item.purGroupName" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content" prop="categoryName">
              <el-form-item label="品类">
                <select-tree :multiple="false" ref="selectTree" v-model="formInline.categoryName"></select-tree>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="grid-content" prop="title">
              <el-form-item label="标题：" prop="title">
                <el-input v-model="formInline.title"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content">
              <el-form-item label="评估类型：" prop="inspectType">
                <el-radio-group v-model="formInline.inspectType">
                  <el-radio :label="1">初审</el-radio>
                  <el-radio :label="2">年度复审</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <h3 class="panel-title">待考察的供应商</h3>
    <div class="panel-table">
      <el-table :data="dataTable" border style="width: 100%">
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="update(scope.row)" type="text" size="small">
              编辑
            </el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="isShow" prop="vendorId" label="供应商ID">
        </el-table-column>
        <el-table-column prop="vendorCode" label="供应商编码">
        </el-table-column>
        <el-table-column prop="vendorErpCode" label="ERP编码">
        </el-table-column>
        <el-table-column prop="vendorName" width="240" label="供应商名称">
        </el-table-column>
      </el-table>
      <div class="dialog-footer">
        <el-button type="primary" icon="el-icon-plus" @click="update({})">新增</el-button>
      </div>
      <el-table :data="dataTable1" border style="width: 100%">
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.native.prevent="deleteRow(scope.$index, dataTable1)" type="text" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="vendorCode" label="供应商编码" width="180">
        </el-table-column>
        <el-table-column prop="vendorErpCode" label="ERP编码">
        </el-table-column>
        <el-table-column prop="vendorId" v-if="isShow" label="供应商ID">
        </el-table-column>
        <el-table-column v-if="isShow" prop="sysStationId" label="评估人id">
        </el-table-column>
        <el-table-column prop="vendorName" width="240" label="供应商名称">
        </el-table-column>
        <el-table-column prop="assessDictItemName" label="评估维度">
        </el-table-column>
        <el-table-column prop="sysStationName" width="240" label="评估岗位">
        </el-table-column>
        <el-table-column prop="resultType" label="评估方式">
          <template slot-scope="scope">
            <p>{{resultType == 1 ? '评分表' : '附件'}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="planTime" label="预计完成日期" width="120">
        </el-table-column>
        <el-table-column prop="remarks" label="备注">
        </el-table-column>
      </el-table>
      <!-- 待考察的供应商弹窗 -->
      <el-dialog title="新增" width="52%" :visible.sync="dialogFormVisible">
        <el-form :inline="true" :model="investigate" label-width="110px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content">
                <el-form-item label="供应商编码：" prop="vendorCode">
                  <select-table v-model="investigate.vendorCode" @on-selection-data="getRowData"></select-table>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <el-form-item label="ERP编码：" prop="vendorErpCode">
                  <el-input readonly="true" v-model="investigate.vendorErpCode"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="grid-content">
                <el-form-item label="供应商名称：" prop="vendorName">
                  <el-input readonly="true" v-model="investigate.vendorName"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <el-form-item label="主供品类：" prop="vendorCategory">
                  <el-input readonly="true" v-model="investigate.vendorCategory"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="grid-content">
                <el-form-item label="企业性质：" prop="cmpNature">
                  <el-input readonly="true" v-model="investigate.cmpNature"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <el-form-item label="备注：" prop="remarks">
                  <el-input v-model="investigate.remarks"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="grid-content" style="display:none">
                <el-form-item label="供应商ID：" prop="vendorId">
                  <el-input v-model="investigate.vendorId"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div class="line"></div>
        <div style="margin-bottom:20px">
          <el-button type="text" @click="dialogFormVisible2 = true">新增评估维度</el-button>
          <el-table :data="dataTable2" border style="width: 100%">
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button @click.native.prevent="deleteRow(scope.$index, dataTable2)" type="text" size="small">
                  移除
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="assessDictItemName" label="评估维度">
            </el-table-column>
            <el-table-column prop="sysStationName" label="评估岗位">
            </el-table-column>
            <el-table-column v-if="isShow" prop="sysStationId" label="评估人id">
            </el-table-column>
            <el-table-column prop="resultType" label="评估方式">
              <template slot-scope="scope">
                {{scope.row.status==1?'模板':'附件'}}
              </template>
            </el-table-column>
            <!-- <el-table-column prop="resultType" label="评分模版">
            </el-table-column> -->
            <el-table-column prop="planTime" label="预计完成时间">
            </el-table-column>
          </el-table>
          <el-dialog title="新增" :visible.sync="dialogFormVisible2" append-to-body>
            <el-form :model="form3" label-width="120px">
              <el-form-item label="评估维度：" prop="assessDictItemId">
                <el-select v-model="form3.assessDictItemId" placeholder="请选择评估维度" @change="()=>{purOrgs.forEach(val=>{if(val.id===form3.assessDictItemId){form3.assessDictItemName=val.name}})}">
                  <el-option v-for="item in purOrgs" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="评估岗位：" prop="sysStationName">
                <experts class="form_experts" v-model="form3.sysStationName" name="sysStationName" @on-selection-data="getRowDatar"></experts>
              </el-form-item>
              <el-form-item label="预计完成日期：" prop="planTime">
                <el-date-picker v-model="form3.planTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
              <!-- <el-form-item label="附件：">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="form3.notes">
                </el-input>
              </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible2 = false">取 消</el-button>
              <el-button type="primary" @click="add2">保存</el-button>
            </div>
          </el-dialog>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add(investigate,dataTable2)">保存</el-button>
        </div>
      </el-dialog>
      <!-- 待考察的供应商弹窗 -->
    </div>
    <div class="fr" style="margin-right:10px">
      <el-button type="primary" icon="el-icon-time" @click="publish('formInline',dataTable1,'/vendormgt/dlv/factoryInspect/save')">保存</el-button>
      <el-button type="success" icon="el-icon-success" @click="publish('formInline',dataTable1,'/vendormgt/dlv/factoryInspect/saveAndPublish')">提交</el-button>
      <router-link to="/Index/VendorDlv/VendorInspect">
        <el-button type="info" icon="el-icon-d-arrow-left">返回</el-button>
      </router-link>
    </div>
  </div>
</template>
<script>
  import SelectTree from '@/components/common/select-ext/select-tree.vue';
  import SelectTable from '@/components/common/select-ext/select-table.vue';
  import Experts from '@/components/common/select-ext/experts.vue';
  export default {
    components: {
      SelectTree,
      SelectTable,
      Experts
    },
    data() {
      return {
        rules: {
          title: [{
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }, ],
          purOrgId: [{
            required: true,
            message: '请选择采购组织',
            trigger: 'change'
          }],
          purGroupId: [{
            required: true,
            message: '请选择采购组',
            trigger: 'change'
          }],
          categoryName: [{
            required: true,
            message: '请选择品类',
            trigger: 'change'
          }],
        },
        // 待办选择的数据
        checkedData: [],
        activeName: 'first',
        isShow: false,
        // 评估维度下来数据
        purOrgs: [],
        formInline: {
          purOrgId: '',
          purOrgName: '',
          purGroupId: '',
          vendorCode: '',
          vendorErpCode: '',
          vendorName: '',
          purGroupId: '',
          inspectType: 1,
          categoryName: '',
          categoryCode: '',
          factoryInspectItemListJsonStr: ''
        },
        dataTable: [],
        dataTable1: [],
        dataTable2: [],
        purOrgOptions: [],
        relationPurGroup: [],
        dialogFormVisible: false,
        dialogFormVisible2: false,
        form: {},
        investigate: {
          id: '',
          vendorErpCode: '',
          vendorCode: '',
          vendorName: '',
          vendorCategory: '',
          cmpNature: '',
          remarks: ''
        },
        form3: {
          assessDictItemId: '',
          assessDictItemName: '',
          sysStationId: '',
          sysStationName: '',
          planTime: '',
          resultType: ''
        }
      };
    },
    created() {
      if (this.$route.query.checkedData) {
        this.checkedData = this.$route.query.checkedData;
        // 赋值给主信息表单
        this.formInline = this.checkedData[0];
        // 级联加载采购组
        this.handleChange(this.checkedData[0].purOrgId);
        // 动态插入待考察供应商数据
        this.checkedData.forEach(element => {
          this.dataTable.push({
            "vendorId": element.vendorId,
            "vendorCode": element.vendorCode,
            "vendorErpCode": element.vendorErpCode,
            "vendorName": element.vendorName,
          });
          this.dataTable1.push({
            "vendorId": element.vendorId,
            "vendorCode": element.vendorCode,
            "vendorErpCode": element.vendorErpCode,
            "vendorName": element.vendorName,
          })
        });
      }
    },
    mounted() {
      this.initData();
      this.query();
    },
    watch: {
      'formInline.categoryName': function (val) {
        let data = this.$refs['selectTree'].getResultData();
        this.formInline.categoryCode = data.categoryCode;
      }
    },
    methods: {
      //获取table供应商编码数据
      getRowData(data) {
        this.investigate = data;
      },
      getRowDatar(data) {
        console.log(data);
        this.form3.sysStationId = data.sysStationId;
      },
      initData() {
        // 获取采购组织
        this.getSelectData('get', this.lib.config.host.masterData + '/system/purOrgMgt/purOrg/getPurOrgByUserId/' +
          this.getCurrUserId(), {}, 'id', 'purOrgName').then((data) => {
          this.purOrgOptions = data;
        });
        //获取评估维度
        this.getDicData('INSPECT_DIMENTION').then((response) => {
          this.purOrgs = response;
        });
        // 查询供货区域数据字典
        this.getDicData('SUPPLY_AREA').then((data) => {
          this.supplyAreaOptions = data;
        });
        // 查询开发流程数据字典
        this.getDicData('DLV_FLOW').then((data) => {
          this.dlvFlowOptions = data;
        });
      },
      // 采购组织在改变的时候查询采购组
      handleChange(value) {
        // 获取srm采购组
        this.getSelectData('post', this.lib.config.host.masterData + '/mdata/purOrgMgt/purGroup/getByPurOrgId/' + value, {},
          'id', 'purGroupName').then((data) => {
          this.relationPurGroup = data;
        });
      },
      // 查询
      query() {
        // this.formInline.categoryId = data.categoryId;
        this.axios.post(this.lib.config.host.vendorDlv + "/vendormgt/dlv/dlvApplyItemFlow/query")
          .then(response => {
            response.data.resultMap.dlvApplyItem.forEach((v) => {
              this.dataTable.push({
                "vendorId": v.vendorId,
                "vendorCode": v.vendorCode,
                "vendorErpCode": v.vendorErpCode,
                "vendorName": v.vendorName
              })
            })
            // this.dataTable = response.data.rows;
          }).catch(error => {
            console.log(this.form.factoryCode);
            console.log('网络错误，不能访问');
          });
      },
      add(investigate, dataTable2) {
        let has = false;
        this.dataTable1.forEach(val => {
          dataTable2.forEach(item => {
            if (val.vendorId === investigate.id && val.assessDictItemId === item.assessDictItemId) {
              has = true;
            }
          })
        })
        if (has) {
          this.$message({
            showClose: true,
            message: '评估维度已经存在，请从新填写',
            type: 'warning'
          });
          return;
        }
        this.dialogFormVisible = false;
        console.log(investigate);
        dataTable2.forEach((v) => {
          if (!this.dataTable.some(val => {
              return val.vendorId === investigate.id
            })) {
            this.dataTable.push({
              "vendorId": investigate.id,
              "vendorCode": investigate.vendorCode,
              "vendorErpCode": investigate.vendorErpCode,
              "vendorName": investigate.vendorName,
            })
          }
          this.dataTable1.push({
            "remarks": investigate.remarks,
            "vendorId": investigate.id,
            "vendorCode": investigate.vendorCode,
            "vendorErpCode": investigate.vendorErpCode,
            "vendorName": investigate.vendorName,
            "assessDictItemId": v.assessDictItemId,
            "assessDictItemName": v.assessDictItemName,
            "sysStationName": v.sysStationName,
            "sysStationId": v.sysStationId,
            "planTime": v.planTime,
            "resultType": 2
          })
        })
      },
      add2() {
        let has = this.dataTable2.some(val => {
          return val.assessDictItemId === this.form3.assessDictItemId})
        if (has) {
          this.$message({
            showClose: true,
            message: '评估维度已经存在，请从新填写',
            type: 'warning'
          });
          return
        }
        this.dataTable2.push({
          ...this.form3,
          resultType: 1
        })
          this.form3.assessDictItemId = '',
          this.form3.sysStationName = '',
          this.form3.planTime = '',
          this.form3.resultType = 1,
          this.dialogFormVisible2 = false
      },
      del(index) {
        this.dataTable.splice(index, 1)
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      update(row) {
        this.dialogFormVisible = true;
        this.investigate = row;
        this.dataTable2 = [];
      },
      //保存 发布
      publish(formName, dataTable1, url) {
        let item = JSON.stringify(dataTable1);
        this.formInline.factoryInspectItemListJsonStr = item;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('是否执行此操作?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.axios.post(this.lib.config.host.vendorDlv + url, this.formInline)
                .then((response) => {
                  this.$message({
                    type: 'success',
                    message: '操作成功!'
                  });
                  this.$router.push('/Index/VendorDlv/VendorInspect');
                })
                .catch((error) => {
                  console.log(error);
                })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消此操作'
              });
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

    }
  }

</script>
<style scoped>
  .form_experts {
    width: 41%;
  }

</style>
